<template>
 <div class="m-footer">
   <p>
     <span v-for="(val, index) in lists" :key="index" @click="onLink(val.href)">{{val.name}}</span>
   </p>
   <div>
     http://www.haoxiadan.cn
   </div>
 </div> 
</template>

<script>
  export default {
    props: {
      lists: {
        type: Array,
        default() {
          return [
            {name: '返回首页', href: '/'},
            {name: '关于好下单', href: '/helpCenter/关于好下单'},
            {name: '商家入驻', href: '/my/extra'},
            {name: '诚聘英才', href: '/helpCenter/诚聘英才'},
            {name: '联系我们', href: '/helpCenter/联系我们'},
            {name: '官方博客', href: 'http://weibo.com/u/6323034425?refer_flag=1001030101_'}
          ]
        }
      }
    },
    methods: {
      onLink(url) {
        if (/http/.test(url)) {
          window.open(url)
        } else {
          this.$router.push(url)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  .m-footer {
    margin: 40px auto;
    font-size: 14px;
    text-align: center;
    color: $color-disabled;
    span {
      color: $color-disabled;
      padding-right: 25px;
      margin-right: 25px;
      border-right: 1px solid $color-disabled;
      font-size: 14px;
      cursor: pointer;
      &:last-of-type {
        border-right: 0;
      }
    }
    p {
      margin-bottom: 20px;
    }
  }
</style>
